<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家订单</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="showOrder">
    <div v-for="orderVo in mOrderVoList">
        <el-descriptions :colon="false" :column="2">

            <el-descriptions-item label="收货地址">:{{orderVo.addressName}} {{orderVo.receiveName}} {{orderVo.tel}}
            </el-descriptions-item>
            <el-descriptions-item label="订单编号">:NO.{{orderVo.id}}</el-descriptions-item>
            <el-descriptions-item label="下单时间">:{{orderVo.createTime}}</el-descriptions-item>
            <el-descriptions-item label="金额￥">:{{orderVo.sumPrice}} (元)</el-descriptions-item>

            <el-descriptions-item label="订单状态:">
                <el-button
                        type="info"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==2">
                    用户取消的订单
                </el-button>
                <el-button
                        type="info"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==3">
                    商家未接订单
                </el-button>
                <el-button
                        type="primary"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==4">
                    商家已接单
                </el-button>
                <el-button
                        type="danger"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==5">
                    商家取消的订单
                </el-button>
                <el-button
                        type="success"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==6">
                    用户确认收货
                </el-button>
                <el-button
                        type="warning"
                        size="small"
                        disabled=""
                        v-show="orderVo.status==7">
                    用户已评论
                </el-button>
            </el-descriptions-item>

        </el-descriptions>
        <div v-if="orderVo.orderItemVoList.length>0">
            <el-table
                    ref="multipleTable"
                    :data="orderVo.orderItemVoList"
                    tooltip-effect="dark"
                    style="">
                <!--<el-table-column
                        label="商品编号"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.productId }}</template>
                </el-table-column>-->
                <el-table-column
                        prop="name"
                        label="商品名称"
                        width="240">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="数量"
                        width="120">
                </el-table-column>
            </el-table>
        </div>
    </div>
</div>
<script>
    var showOrder = new Vue({
        el: "#showOrder",
        data: {
            mOrderVoList: [],
            shopId: '',
            status: ''
        }
        ,
        methods: {
            merchantOrderVoList(shopId,status) {
                let id = JSON.parse(localStorage.getItem("shopId"));

                $.post("/order/merchantOrderVoList",{shopId: id, status: status}, function (data) {
                    showOrder.mOrderVoList =data;

                })
            }

        }
        ,
        created() {
            this.merchantOrderVoList();
        }
    });
</script>
</body>
</html>